<!DOCTYPE html>
<html>

<head>
    <title> How to bind function in React? </title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isToogle: true,
            }
        }

        // Way 3: Recommended. Use class fields to bind callback
        // This syntax ensures 'this' is bound within handleClick.
        // 只绑定1次。
        // ES6 自己内部绑定了this 为Toggle
        handClick = () => {
            // this = Toggle instance
            console.log('this is :', this);
            this.setState(function (prevState) {
                return {
                    isToogle: !prevState.isToogle,
                }
            });
        }

        render() {
            // handClick = () => 只被新建一次。this.handClick 想等于 直接读取被创建后的地址。
            return (<button onClick={this.handClick}>
                {this.state.isToogle ? "ON" : "OFF"}
            </button>);
        }
    }

    ReactDOM.render(<Toggle />, document.getElementById('root'));
</script>